<template>
  <div class="container">
    <Row style="height: 100%">
      <i-col span="21" style="height: 100%"> 
        <div class="luckysheet" id="hideColumn"></div>
      </i-col>
      <i-col span="3" style="height: 100%"> 
        <Card :bordered="false">
            <p slot="title">隐藏列</p>
            <p>
            <Form :model="formItem" :label-width="80">
                <Form-item label="选择sheet">
                    <Select v-model="formItem.select" placeholder="请选择">
                        <Option value="0">表一</Option>
                        <Option value="1">表二</Option>
                    </Select>
                </Form-item>
                <Form-item label="起始列">
                    <Input v-model="formItem.start" placeholder="请输入"></Input>
                </Form-item>
                <Form-item label="结束列">
                    <Input v-model="formItem.end" placeholder="请输入"></Input>
                </Form-item>
                <Form-item label="">
                    <Button type="primary" @click="fSubmit">提交</Button>
                </Form-item>
            </Form>
            </p>
        </Card>
      </i-col>
    </Row>
  </div>
</template>

<script>
export default {
  name: "hideColumn",
  data() {
    return {
      options: {
        container: "hideColumn", // 设定DOM容器的id
        title: "隐藏列", // 设定表格名称
        lang: "zh", // 设定表格语言
        userImage:
          "https://cdn.jsdelivr.net/npm/luckyresources@1.0.3/assets/img/logo/logo.png", // 头像url
        userInfo: "方云", //用户信息
         data: [
          //数据
          {
            name: "表一",//工作表名称
            color: "",
            index: 1,//唯一id
            status: 1,
            order: 1,
            celldata: [],
            config: {},
          },
          {
            name: "表二",
            color: "",
            index: 2,
            status: 0,
            order: 2,
            celldata: [],
            config: {},
          },
        ],
      },
      formItem: {
        select: '0',
        start: 1,
        end: 2,
      },
    };
  },
  methods: {
    //提交
    fSubmit() {
      var start = this.formItem.start - 1,
        end = this.formItem.end - 1;
      luckysheet.hideColumn(start, end, {order:parseInt(this.formItem.select,10)});
    },
  },
  mounted() {
    // 初始化表格
    luckysheet.create(this.options);
  },
};
</script>

<style scoped>
.luckysheet {
  width: 100%;
  height: 100%;
}
</style>
